﻿<div ng-form="mainForm" class="app-request-form container-fluid form-horizontal" role="form">
    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    <!--#region approvers-->
                    <div class="panel panel-default">
                        <div class="panel-heading">Approvers</div>
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row form-group app-required">
                                    <label class="col-xs-4 col-md-2 control-label">Approvers:</label>
                                    <div class="col-xs-8 col-md-4">
                                        <sp-peoplepicker name="approvers" multiple="true" ng-model="Request.Approvers" required></sp-peoplepicker>
                                        <div class="validation-error" ng-show="mainForm.approvers.$dirty && mainForm.approvers.$invalid">
                                            <span class="validation-error" ng-show="mainForm.approvers.$error.required">This field is required.</span>
                                            <span class="validation-error" ng-show="mainForm.approvers.$error.failedToResolve">Failed to resolve users.</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--#endregion-->
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="row">
                <div class="col-md-6">
                    <!--#region destination-->
                    <div class="panel panel-default">
                        <div class="panel-heading">Destination</div>
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row form-group" ng-class="{'app-required': FieldProperties.Country.Required}">
                                    <label for="Country" class="col-xs-4 control-label">Country:</label>
                                    <div class="col-xs-8 app-field">
                                        <sp-taxonomypicker name="country" id="Country" ng-model="Request.Country" ismulti="{{FieldProperties.Country.Multiple}}" termsetid="{{FieldProperties.Country.TermSetId}}" ng-required="FieldProperties.Country.Required"></sp-taxonomypicker>
                                        <div class="validation-error" ng-show="mainForm.country.$dirty && mainForm.country.$invalid">
                                            <span class="validation-error" ng-show="mainForm.country.$error.required">This field is required.</span>
                                            <span class="validation-error" ng-show="mainForm.country.$error.failedToResolve">Failed to resolve terms.</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label for="City" class="col-xs-4 control-label">City:</label>
                                    <span class="col-xs-8">
                                        <input class="form-control input-sm" type="text" id="City" data-ng-model="Request.City" />
                                    </span>
                                </div>
                                <div class="row form-group">
                                    <label for="Company" class="col-xs-4 control-label">Company:</label>
                                    <span class="col-xs-8">
                                        <input class="form-control input-sm" type="text" id="Company" data-ng-model="Request.Company" />
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--#endregion-->
                </div>
                <div class="col-md-6">
                    <!--#region purpose of trip-->
                    <div class="panel panel-default">
                        <div class="panel-heading">Purpose of trip</div>
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row form-group" ng-class="{'app-required': FieldProperties.Purpose.Required}">
                                    <label for="Purpose" class="col-xs-4 control-label">Purpose:</label>
                                    <div class="col-xs-8 app-field">
                                        <sp-taxonomypicker name="purpose" id="Purpose" ng-model="Request.Purpose" ismulti="{{FieldProperties.Purpose.Multiple}}" termsetid="{{FieldProperties.Purpose.TermSetId}}" ng-required="FieldProperties.Purpose.Required"></sp-taxonomypicker>
                                        <div class="validation-error" ng-show="mainForm.purpose.$dirty && mainForm.purpose.$invalid">
                                            <span class="validation-error" ng-show="mainForm.purpose.$error.required">This field is required.</span>
                                            <span class="validation-error" ng-show="mainForm.purpose.$error.failedToResolve">Failed to resolve terms.</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row form-group" ng-class="{'app-required': FieldProperties.FinYear.Required}">
                                    <label for="FinYear" class="col-xs-4 control-label">FinYear:</label>
                                    <div class="col-xs-8 app-field">
                                        <sp-taxonomypicker name="finyear" id="FinYear" ng-model="Request.FinYear" ismulti="{{FieldProperties.FinYear.Multiple}}" termsetid="{{FieldProperties.FinYear.TermSetId}}" ng-required="FieldProperties.FinYear.Required"></sp-taxonomypicker>
                                        <div class="validation-error" ng-show="mainForm.finyear.$dirty && mainForm.finyear.$invalid">
                                            <span class="validation-error" ng-show="mainForm.finyear.$error.required">This field is required.</span>
                                            <span class="validation-error" ng-show="mainForm.finyear.$error.failedToResolve">Failed to resolve terms.</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row form-group" ng-class="{'app-required': FieldProperties.Training.Required}">
                                    <label for="Training" class="col-xs-4 control-label">Training:</label>
                                    <div class="col-xs-8 app-field">
                                        <sp-taxonomypicker name="training" id="Training" ng-model="Request.Training" ismulti="{{FieldProperties.Training.Multiple}}" termsetid="{{FieldProperties.Training.TermSetId}}" ng-required="FieldProperties.Training.Required"></sp-taxonomypicker>
                                        <div class="validation-error" ng-show="mainForm.training.$dirty && mainForm.training.$invalid">
                                            <span class="validation-error" ng-show="mainForm.training.$error.required">This field is required.</span>
                                            <span class="validation-error" ng-show="mainForm.training.$error.failedToResolve">Failed to resolve terms.</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label for="Details" class="col-xs-4 control-label">Details:</label>
                                    <span class="col-xs-8">
                                        <textarea class="form-control input-sm" id="Details" data-ng-model="Request.Details" />
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--#endregion-->
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    <!--#region travelers-->
                    <div class="panel panel-default">
                        <div class="panel-heading">Travelers</div>
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row form-group app-required">
                                    <label class="col-xs-4 col-md-2 control-label">Travelers:</label>
                                    <div class="col-xs-8 col-md-4">
                                        <sp-peoplepicker name="travelers" multiple="true" ng-model="Request.Travelers" required></sp-peoplepicker>
                                        <div class="validation-error" ng-show="mainForm.travelers.$dirty && mainForm.travelers.$invalid">
                                            <span class="validation-error" ng-show="mainForm.travelers.$error.required">This field is required.</span>
                                            <span class="validation-error" ng-show="mainForm.travelers.$error.failedToResolve">Failed to resolve users.</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--#endregion-->
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <button class="btn btn-success btn-lg" ng-disabled="mainForm.$invalid" data-ng-click="submitRequest($event)">
                <span class="glyphicon glyphicon-pencil"></span> {{submitButtonText}}
            </button>
            <button class="btn btn-danger btn-lg pull-right" data-ng-click="cancel($event)">
                <span class="glyphicon glyphicon-remove"></span> Cancel
            </button>
        </div>
    </div>
</div>
